<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider width="250" v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <div class="logo-img" v-if="!collapsed">
          <img src="../assets/img/Icon/菜单-生产设备.png" alt="" />
        </div>
        <div class="logo-title">
          {{ collapsed ? "MES" : "数智化工厂协同平台" }}
        </div>
      </div>
      <div class="menu">
        <a-menu
          mode="inline"
          theme="dark"
          :inline-collapsed="collapsed"
          :openKeys="openKeys"
          @openChange="onOpenChange"
        >
          <a-sub-menu
            v-for="item in permissionList"
            :key="item.ResourceID"
            class="menu-content"
          >
            <span slot="title"
              ><span class="box-title">{{ item.ResourceName }}</span></span
            >
            <a-menu-item
              :class="[
                'box-list',
                children.path == $route.path ? 'actives' : '',
              ]"
              v-for="children in item.ResourceList"
              :key="children.path"
              @click="btnJump(children)"
            >
              <img
                style="height: 1.25rem; width: 1.25rem; margin-right: 0.625rem"
                :src="children.icon"
                alt=""
              />
              <span>{{ children.ResourceName }}</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>

      <div class="ch-logo" @click="$router.push('/KanBan')">
        <img src="../../src/assets/img/chcontrol.png" alt="" />
      </div>
    </a-layout-sider>
    <a-layout>
      <a-layout-header
        style="
          background: #fff;
          padding: 0;
          display: flex;
          height: 4rem;
          line-height: 4rem;
        "
      >
        <!-- <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" /> -->
        <div class="Info-boxs">
          <div class="Info-title">
            <a-button
              style="margin-right: 0.625rem; border: none"
              @click="toggleCollapsed"
            >
              <a-icon
                style="font-size: 1.25rem"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              />
            </a-button>
            <span style="font-size: 1rem">{{ $route.meta.title }}</span>
          </div>
          <div class="operate-box">
            <!-- <div><a-icon type="question-circle" style="font-size: 1.5rem;" /></div>
						<div>
							<a-badge dot><a-icon type="bell" style="font-size: 1.5rem;" /></a-badge>
						</div> -->
            <div class="user-info">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>刷新</span>
                </template>
                <div
                  class="userIcon"
                  style="font-size: 1rem; cursor: pointer"
                  @click="refreshFun"
                >
                  <a-icon type="sync" />
                </div>
              </a-tooltip>
              <div
                style="font-size: 1rem; cursor: pointer; font-weight: 700"
                @click="aboutFun"
              >
                关于
              </div>
              <div
                style="font-size: 1rem; cursor: pointer; font-weight: 700"
                @click="homeFun"
              >
                首页
              </div>
              <a-avatar icon="user" style="font-size: 1rem" />
              <div>
                <a-dropdown>
                  <a
                    class="ant-dropdown-link"
                    @click="(e) => e.preventDefault()"
                  >
                    <span
                      style="
                        margin: 0 1rem;
                        font-weight: normal;
                        font-size: 1.2rem;
                      "
                      >{{ userInfo.UserAccount || "暂无" }}</span
                    >
                    <a-icon
                      type="down"
                      style="font-size: 1rem; color: #18181a"
                    />
                  </a>
                  <a-menu slot="overlay" @click="onClick">
                    <a-menu-item key="2" style="font-size: 0.8rem">
                      <a-icon type="poweroff" />
                      注销
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
            </div>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content>
        <!-- <Overflow> -->
        <div class="content">
          <Tabs
            ref="tab"
            :key="key"
            @renew="renewSideList"
            @upTab="upTabFun"
          ></Tabs>
          <keep-alive :include="cachedViews"><router-view /></keep-alive>
        </div>
        <!-- </Overflow> -->
      </a-layout-content>
    </a-layout>
    <About :visible.sync="aboutShow"></About>
  </a-layout>
</template>
<script>
import Tabs from "../components/Tabs.vue";
import About from "./About.vue";

export default {
  inject: ["reload"],
  components: {
    Tabs,
    About,
  },

  methods: {
    //关于
    aboutFun() {
      this.aboutShow = true;
    },
    //点击跳转
    onClick({ key }) {
      if (key == 2) {
        localStorage.removeItem("nbcToken");
        if (!localStorage.getItem("nbcToken")) {
          localStorage.removeItem("nbcUserInfo");
          localStorage.removeItem("userresource");
          localStorage.removeItem("usermenu");
          window.sessionStorage.removeItem("tabCacheList");
          window.sessionStorage.removeItem("tabBlockList");
          this.$store.commit("All_DELETE_CACHE_VIEW");
          this.$router.push("/login");
        }
      } else {
        this.visible = true;
      }
    },
    //跳转回到首页
    homeFun() {
      this.$router.push("/home");
      this.$refs.tab.sing();
    },
    //刷新当前页
    refreshFun() {
      this.reload();
    },
    //展开收起列表
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    //找到相对应路由页面
    btnJump(item) {
      /* 先跳转到相对应页面 */

      /* 从sessionstorage中查找是否已添加 */
      let blockTabList = JSON.parse(
        window.sessionStorage.getItem("tabBlockList")
      );
      let canheTabList = JSON.parse(
        window.sessionStorage.getItem("tabCacheList")
      );
      if (blockTabList.find((itm) => itm.path == item.path)) {
        this.$router.push(item.path);
      } else {
        blockTabList.push(item);
        canheTabList.push(item.path.substring(1));
        window.sessionStorage.setItem(
          "tabBlockList",
          JSON.stringify(blockTabList)
        );
        this.resetSetItem("tabCacheList", JSON.stringify(canheTabList));

        this.$router.push(item.path);
        this.$refs.tab.searchRight();
      }
      this.key += 1;
    },

    spString(str, type) {
      let num = str.split(";");
      if (type == 1) {
        return num[0];
      } else if (type == 2) {
        return num[1];
      } else if (type == 3) {
        return num[2];
      }
    },
    handleData(result) {
      let that = this;
      function loop(list, keys = []) {
        // 循环【顶级菜单数组列表】 循环的数组下标用i表示
        // keys参数为当前菜单的所有上级菜单的router（用作openKeys的值)
        for (let item of list) {
          if (item.path === that.$route.path) {
            // 如果路由path与item.router相等则直接返回当前路由的所有上级的router
            return [...keys];
          } else if (item.ResourceList && item.ResourceList.length) {
            // 如果item.router不等于当前$router.path则递归调用loop函数，传入item.children、[...keys, item.router]
            let tempResult = loop(item.ResourceList, [
              ...keys,
              item.ResourceID,
            ]);

            if (tempResult !== false) {
              return tempResult;
            }
          }
        }
        return false;
      }
      this.openKeys = loop(result);
    },
    onOpenChange(openKeys) {
      // 当菜单被展开时触发此处
      /* 
      经测试传入的变量openKeys是数组 点击已经展开的菜单时传入的是空数组
      点击未展开的菜单时传入的是[当前展开菜单的key,点击的菜单key]
      下面的if判断用openKeys === [] 无效 所以我只能判断数组length是否等于0
      */
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]];
      } else {
        this.openKeys = [""];
      }
    },
    //点击顶部Tab栏时侧边栏变化
    renewSideList() {
      if (this.$route.path != "/home") {
        this.handleData(this.permissionList);
      }
    },
    upTabFun() {
      this.key++;
    },
  },
  mounted() {},

  data() {
    return {
      collapsed: false, //判断Logo是否隐藏
      cachedViews: [], //缓存列表
      userInfo: {}, //用户信息
      permissionList: [], //返回的权限列表
      key: 1, //强制刷新
      openKeys: [""],
      aboutShow: false, //关于
    };
  },
  created() {
    // 添加页面刷新逻辑
    if (!sessionStorage.getItem("hasReloaded")) {
      sessionStorage.setItem("hasReloaded", "1");
      location.reload();
    }
    this.permissionList = JSON.parse(localStorage.getItem("usermenu"));
    this.userInfo = JSON.parse(localStorage.getItem("nbcUserInfo"));
    if (this.permissionList) {
      this.permissionList.map((item, index) => {
        if (item.ResourceList && item.ResourceList != undefined) {
          if (item.ResourceName.indexOf("分析") != -1) {
            item.ResourceList.map((ditm) => {
              ditm.path = this.spString(ditm.ResourceDesc, 1);
              ditm.icon = require(`@/assets/img/Icon/设备实时生产信息.png`);
              ditm.name = this.spString(ditm.ResourceDesc, 3);
            });
          } else {
            item.ResourceList.map((itm, idx) => {
              itm.path = this.spString(itm.ResourceDesc, 1);
              itm.icon = require(`@/assets/img/Icon/${itm.ResourceName}.png`);
              itm.name = this.spString(itm.ResourceDesc, 3);
            });
          }
        }
      });
    }
    // this.cachedViews = JSON.parse(sessionStorage.getItem('tabCacheList'))
    if (this.$route.path != "/home") {
      this.handleData(this.permissionList);
    }
    window.addEventListener("setItem", () => {
      this.cachedViews = JSON.parse(sessionStorage.getItem("tabCacheList"));
    });
    const token = JSON.parse(localStorage.getItem("nbcToken"));
    if (token && !window.sessionStorage.getItem("tabBlockList")) {
      window.sessionStorage.setItem(
        "tabBlockList",
        JSON.stringify([{ path: "/home", name: "首页", ResourceName: "首页" }])
      );
      window.sessionStorage.setItem("tabCacheList", JSON.stringify(["/home"]));
    }
  },
  mounted() {
    this.cachedViews = JSON.parse(sessionStorage.getItem("tabCacheList"));
  },
};
</script>
<style lang="less">
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .ant-layout-sider {
  background-color: #134150;
}

.ant-layout-sider-children {
  display: flex;
  flex-direction: column;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  margin: 1rem 0.8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#components-layout-demo-custom-trigger .logo .logo-img img {
  height: 2.25rem;
  width: 2.25rem;
  margin-right: 0.5rem;
}

#components-layout-demo-custom-trigger .logo .logo-title {
  font-size: 1rem;
  color: #eeeeee;
  font-weight: 550;

  letter-spacing: 0.2rem;
}

.ant-menu-submenu-title {
  height: auto;
}

#components-layout-demo-custom-trigger .menu {
  background-color: #134150;
  color: #ffffff;
  /* height: 86vh; */
  overflow: auto;
  /* position: fixed; */
  left: 0;
  flex: 1;
}

#components-layout-demo-custom-trigger .ch-logo {
  display: flex;
  /* justify-content: flex-end; */
  margin: 0.625rem 1rem;
}

#components-layout-demo-custom-trigger .ch-logo img {
  width: 65%;
}

#components-layout-demo-custom-trigger .menu::-webkit-scrollbar {
  margin-left: 1rem;
  height: 0.4125rem;
  width: 0rem;
}

#components-layout-demo-custom-trigger .menu::-webkit-scrollbar-thumb {
  border-radius: 0.625rem;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  background: #009a9a;
  background: rgba(2, 35, 60, 1);
}

#components-layout-demo-custom-trigger .menu::-webkit-scrollbar-track {
  -webkit-box-shadow: 0;
  border-radius: 0.625rem;
  background: #ccc;
}

#components-layout-demo-custom-trigger .menu::-webkit-scrollbar-corner {
  background: red;
}

#components-layout-demo-custom-trigger .menu .menu-content {
  background-color: #134150;
}

#components-layout-demo-custom-trigger
  .menu
  .menu-content
  .ant-menu-submenu-title {
  height: auto;
}

#components-layout-demo-custom-trigger .menu .box-title {
  margin: 1rem 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5rem;
}

.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  margin: 0;
  background-color: #134150 !important;
  box-shadow: none !important;
}

#components-layout-demo-custom-trigger .menu .box-list {
  color: #ffffff;
  font-size: 1rem;
  /* font-weight: 700; */
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: #134150;
  padding: 1.8rem 0 1.8rem 3rem !important;
  box-sizing: border-box;
  margin: 0 !important;
}

#components-layout-demo-custom-trigger .menu .box-list:hover {
  background-color: #48d1cc !important;
  color: #ffffff;
}

#components-layout-demo-custom-trigger .menu .box-list .txt {
  margin-left: 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.2rem;
  font-weight: bold;
}

#components-layout-demo-custom-trigger {
  width: 100%;
  height: 100%;
}

.ant-menu-item-group-title {
  padding: 0 !important;
}

.Info-boxs {
  display: flex;
  /* margin-left: 1.625rem; */
  margin: 0 1.5rem;
  flex: 1;
  justify-content: space-between;
}

.Info-boxs .operate-box {
  display: flex;
  align-items: center;
}

.Info-boxs .operate-box div {
  margin: 0 1.25rem;
}

.Info-boxs .operate-box .user-info {
  display: flex;
  align-items: center;
}

.Info-boxs .operate-box .user-info .userIcon i {
  transition: all 0.6s;
}

.Info-boxs .operate-box .user-info .userIcon i:hover {
  transform: rotate(360deg);
}

.Info-boxs span {
  margin-left: 0.2125rem;
  font-size: 2rem;
  font-weight: 700;
  color: #18181a;
}

.actives {
  color: #08f7f7 !important;
}

.ant-layout-content {
  .content {
    padding: 0.625rem;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
